<template>
  <view class="search-container">
    <!-- 搜索头部 -->
    <view class="search-header">
      <view class="search-input-wrap">
        <uni-icons type="search" size="18" color="#999"></uni-icons>
        <input
          class="search-input"
          type="text"
          v-model="searchText"
          placeholder="搜房源、合同"
          @confirm="handleSearch"
          confirm-type="search"
          focus
        />
      </view>
      <text class="cancel-btn" @click="goBack">取消</text>
    </view>

    <!-- 搜索标签 -->
    <view class="search-tags">
      <view class="tag-item active">
        <text>合租</text>
      </view>
      <view class="tag-item">
        <text>搜合租</text>
      </view>
      <view class="tag-item">
        <text>整租</text>
      </view>
    </view>

    <!-- 搜索历史 -->
    <view class="search-history" v-if="historyList.length > 0 && !searchText">
      <view class="history-header">
        <text class="title">搜索历史</text>
        <uni-icons type="trash" size="16" color="#999" @click="clearHistory"></uni-icons>
      </view>
      <view class="history-list">
        <view
          class="history-item"
          v-for="(item, index) in historyList"
          :key="index"
          @click="handleHistoryClick(item)"
        >
          <text>{{ item }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      historyList: []
    }
  },
  onLoad() {
    // 获取搜索历史
    this.getSearchHistory()
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    getSearchHistory() {
      const history = uni.getStorageSync('searchHistory') || []
      this.historyList = history
    },
    saveSearchHistory(keyword) {
      let history = uni.getStorageSync('searchHistory') || []
      // 去重
      if (!history.includes(keyword)) {
        history.unshift(keyword)
        // 最多保存10条历史记录
        if (history.length > 10) {
          history = history.slice(0, 10)
        }
        uni.setStorageSync('searchHistory', history)
        this.historyList = history
      }
    },
    clearHistory() {
      uni.showModal({
        title: '提示',
        content: '确定清空搜索历史吗？',
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync('searchHistory')
            this.historyList = []
          }
        }
      })
    },
    handleSearch() {
      if (!this.searchText.trim()) return
      this.saveSearchHistory(this.searchText)
      // TODO: 实现搜索逻辑
    },
    handleHistoryClick(keyword) {
      this.searchText = keyword
      this.handleSearch()
    }
  }
}
</script>

<style lang="scss">
.search-container {
  min-height: 100vh;
  background-color: #fff;
  padding-top: var(--status-bar-height);
}

.search-header {
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  
  .search-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    background-color: #f8f8f8;
    border-radius: 36rpx;
    padding: 0 24rpx;
    margin-right: 20rpx;
    height: 72rpx;
    
    .uni-icons {
      margin-right: 12rpx;
    }
  }
  
  .search-input {
    flex: 1;
    height: 100%;
    font-size: 28rpx;
    color: #333;
  }
  
  .cancel-btn {
    font-size: 30rpx;
    color: #666;
    padding: 0 4rpx;
  }
}

.search-tags {
  display: flex;
  padding: 20rpx 24rpx;
  border-bottom: 1rpx solid #eee;
  
  .tag-item {
    padding: 12rpx 32rpx;
    background-color: #f8f8f8;
    border-radius: 32rpx;
    margin-right: 20rpx;
    
    text {
      font-size: 26rpx;
      color: #666;
    }
    
    &.active {
      background-color: #e6f7ff;
      
      text {
        color: #1890ff;
      }
    }
  }
}

.search-history {
  padding: 24rpx;
  
  .history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
    
    .title {
      font-size: 30rpx;
      color: #333;
      font-weight: 500;
    }
  }
  
  .history-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    
    .history-item {
      padding: 12rpx 28rpx;
      background-color: #f8f8f8;
      border-radius: 28rpx;
      
      text {
        font-size: 26rpx;
        color: #666;
      }
    }
  }
}
</style>